<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>n:{{ n }}</p>
    <button @click="add">n+1</button>
    <hr>
    <ul v-for="ele in newsList">
        <li>序号：{{ ele.id }}</li>
        <li>名称：{{ele.title}}</li>
        <li>详情：{{ ele.description }}</li>
    </ul>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">


    const vm = new Vue({
        el: '#app',
        data: {
            n: 1,
            newsList: [],
        },
        methods: {
            add(n) {
                this.n += 1;
            },
            async getNewsList() {
                let url = 'https://yw.52kfw.cn/api/news/flist?currentPage=1&pageSize=100&cate_id=%E6%9C%80%E6%96%B0%E6%97%B6%E8%AE%AF';
                let rs = await axios.get(url);
                this.newsList = rs.data.data.list;
            }
        },

        beforeCreate() {
            console.log('beforeCreate', this.$data); // this.$data 拿到 data
        },
        async created() {
            this.getNewsList();
        },
        beforeMount() {
            console.log('beforeMount', this.$data);
        },
        mounted() {
            console.log('mounted', this.$data);
        },

        /*
        * 在页面的数据变化后，会自动的指向
        *
        * 在更细之前执行
        * */
        beforeUpdate() {
            console.log('beforeUpddate');
        },
        /*
        * 页面更新渲染完后执行
        * */
        updated() {
            console.log('updated');
        },
        /*
        * spa 做页面切换的时候，一般做一些资源释放类的操作
        *
        * 例如 周期性的定时器，那么在页面切换销毁的时候
        * 需要把定时器清除，容易导致内存的泄漏
        *
        * */
        beforeDestroy(){

            console.log('beforeDestroy');

        },
        destroyed(){

            console.log('destroyed');

        }

    })

</script>

</html>
